<template>
	<view class="yg">
		<!-- 搜索组件开始 -->
		<!-- 3. 使用 search 组件 -->
		<search></search>
		<!-- 搜索组件结束-->

		<!-- a.5 渲染轮播图界面开始 -->
		<view class="yg-swiper">
			<swiper indicator-color="true" indicator-dots="true" interval="3000" autoplay="true">
				<swiper-item v-for="(item,index) in swiperData" :key="item.goods_id">
					<navigator :url="'/pages/goods_detail/goods_detail?goods_id='+item.goods_id">
						<image :src="item.image_src"></image>
					</navigator>
				</swiper-item>
			</swiper>
		</view>
		<!-- 渲染轮播图界面结束 -->

		<!-- c.4 渲染首页导航数据开始 -->
		<view class="yg-navs">
			<navigator url="/pages/category/category" open-type="switchTab" v-for="(item,index) in navs"
				:key="item.image_src" class="yg-navs-item">
				<image :src="item.image_src"></image>
			</navigator>
		</view>
		<!-- c.4 渲染首页导航数据结束 -->

		<!-- d.4 渲染首页图片列表开始 -->
		<view class="yg-pics">
			<view class="yg-pics-item" v-for="(item,index) in floorData" :key="index">
				<!-- 图片标题的开始 -->
				<view class="pics-item-title">
					<image :src="item.floor_title.image_src"></image>
				</view>
				<!-- 图片标题的结束 -->
				<!-- 图片列表开始 -->
				<view class="pics-item-list">
					<navigator :url="v.navigator_url" class="item-list-i" v-for="(v,i) in item.product_list"
						:key="v.image_src">
						<image :src="v.image_src"></image>
					</navigator>
				</view>
				<!-- 图片列表结束 -->

			</view>
		</view>
		<!-- d.4 渲染首页图片列表结束 -->

		<!-- 点击返回顶部按钮 -->
		<view class="yg-top" v-show="showBackToTop" @click="goTop">
			顶部
		</view>
	</view>
</template>

<script>
	// 1. 引入 search 组件
	import search from "@/components/Search.vue"
	// 引入请求库
	import {
		request
	} from '@/utils/request.js'

	export default {
		/* 2. 通过局部组件方式引用 search组件 */
		components: {
			"search": search
		},
		async created() {
			// 发请求获取数据
			let res = await request({
				url: "home/swiperdata"
			})
			// 赋值
			this.swiperData = res.message;

			// c.1 请求首页导航的数据
			let res1 = await request({
				url: "home/catitems"
			});
			// c.3 将请求回来的导航数据存到 navs 中
			this.navs = res1.message;

			// d.1 获取首页的图片列表的数据
			let res2 = await request({
				url: "home/floordata"
			})
			// 处理跳转路径问题
			res2.message.map(v => {
				v.product_list.map(vv => {
					vv.navigator_url = "/pages/goods_list/goods_list?" + vv.navigator_url.split('?')[1]
				})
			})
			this.floorData = res2.message

		},
		data() {
			return {
				swiperData: [],
				navs: [],
				floorData: [],
				// f.1 定义一个控制置顶按钮显示或隐藏的按钮
				showBackToTop: false
			}
		},
		// 获取页面的滚动事件
		onPageScroll(obj) {
			console.log(obj);
			// 获取页面可视窗口高度(屏幕高度)
			let windowHeight = uni.getSystemInfoSync().windowHeight;
			console.log('windowHeight', windowHeight)
			if (((windowHeight / 2) - 100) < obj.scrollTop) {
				this.showBackToTop = true;
			} else {
				this.showBackToTop = false;
			}
		},
		methods: {
			// f.2 返回顶部的方法
			goTop: function() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			}
		}
	}
</script>


<style lang="scss">
	.yg-top {
		position: fixed;
		background-color: #eb4450;
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		line-height: 80rpx;
		text-align: center;
		color: white;
		bottom: 10rpx;
		right: 10rpx;
	}

	.yg {

		.yg-pics {

			.yg-pics-item {
				.pics-item-title {
					image {
						height: 60rpx;
					}
				}

				.pics-item-list {
					overflow: hidden;
					margin-bottom: 20rpx;

					navigator {
						float: left;

						image {
							width: 100%;
							height: 100%;
						}

						&:nth-child(1) {
							margin-left: 16rpx;
							height: 386rpx;
							width: 232rpx;
						}

						&:nth-child(3),
						&:nth-child(2) {
							margin-bottom: 10rpx;
						}

						&:nth-child(2),
						&:nth-child(4) {
							margin-left: 15rpx;
							height: 188rpx;
							width: 233rpx;
						}

						&:nth-child(3),
						&:nth-child(5) {
							margin-left: 15rpx;
							height: 188rpx;
							width: 223rpx;
						}
					}
				}

			}
		}

		.yg-swiper {
			height: 340rpx;

			swiper {
				height: 340rpx;
			}

			swiper-item {
				height: 340rpx;

				navigator {
					height: 340rpx;
				}
			}

		}

		.yg-navs {
			display: flex;

			.yg-navs-item {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 128rpx;
					height: 140rpx;
				}
			}
		}
	}
</style>
